<template>
    <view style="height: 100%">
        <view :class="'l-class checkbox-group checkbox-group-' + placement">
            <slot></slot>
        </view>
        <l-error-tip l-error-text-class="l-error-text l-error-text-class" :errorText="errorText" v-if="errorText" />
    </view>
</template>

<script>
import lErrorTip from '../error-tip/index';
import lCheckbox from '../checkbox/index';
import eventBus from '../core/utils/event-bus';
import rules from '../behaviors/rules';
export default {
    unicomGroup: ['checkbox'],
    data() {
        return {
            errorText: ''
        };
    },
    mixins: ['wx://form-field', rules],
    externalClasses: ['l-class', 'l-error-text', 'l-error-text-class'],
    relations: {
        '../checkbox/index': {
            type: 'child',
            linked(e) {
                this.init(e);
            },
            linkChanged() {},
            unlinked() {}
        }
    },
    props: {
        placement: {
            type: String,
            default: 'column'
        },
        maxSelected: {
            type: [Number, null],
            default: null
        },
        minSelected: {
            type: [Number, null],
            default: null
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            let { minSelected: e, maxSelected: t } = this;
            this.checkMax(e, t);
        },

        init(e) {
            if (void 0 === this._keys) {
                this._keys = {};
            }
            if (void 0 === this._selected) {
                this._selected = {};
            }
            this.checkDefaultItem(e);
            this.checkedKeyRepeat(e);
        },

        checkedKeyRepeat(e) {
            let { key: t } = e.properties;
            if (this._keys[t]) {
                throw new Error('keys有重复元素, checkbox的key属性不能重复：' + t);
            }
            this._keys[t] = true;
        },

        checkDefaultItem(e) {
            const { key: t, checked: l, cell: s } = e.properties;
            if (l) {
                this._selected[t] = {
                    ...s,
                    checked: true,
                    value: t
                };
            }
        },

        checkMax(e, t) {
            if (null !== e && e < 0) {
                throw new Error('最小选择个数必须大于等于0');
            }
            if (null !== t && t < 0) {
                throw new Error('最多选择个数必须大于0');
            }
            if (null !== t && null !== e && e >= t) {
                throw new Error('最多选择个数必须大于最小选择个数');
            }
        },

        onEmitEventHandle(e) {
            if (e.checked) {
                this.addSelect(e);
            } else {
                this.removeSelect(e.key);
            }
            this.validatorData({
                [this.name]: Object.values(this._selected)
            });
            this.$emit(
                'linchange',
                {
                    detail: e
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
            eventBus.emit('lin-form-change-' + this.id, this.id);
        },

        onEmitOverflowHandle(e) {
            this.$emit(
                'linout',
                {
                    detail: e
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        removeSelect(e) {
            delete this._selected[e];
        },

        addSelect(e) {
            let { key: t, ...l } = e;
            this._selected[t] = {
                ...l,
                value: t
            };
        },

        getValues() {
            return Object.values(this._selected);
        },

        reset() {
            this._selected = {};
            return this.getRelationNodes('checkbox').forEach((e) =>
                e.setData({
                    checked: false
                })
            );
        }
    },
    created: function () {
        /** linked处理 */
        this.getRelationNodes('checkbox').map((e) => {
            this.init(e);
        });
    }
};
</script>
<style>
.checkbox-group {
    flex-wrap: wrap;
}
.checkbox-group-row {
    display: flex;
    flex-direction: row;
}
.checkbox-group-column {
    display: flex;
    flex-direction: column;
}
</style>
